﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        .rendered {
            padding: 5px;
            margin: 18px 0 30px;
            border: 1px dashed #ccc;
            font-family: Consolas, monospace;
            overflow: auto;
            display: block;
            background-color: #ffbfda;
        }
    </style>
    <link href="/css/article.css" rel="stylesheet" />
</head>
<body>    
    <div class="content article-page article-content">        
        <h1>Razor Syntax demo</h1>
        <p>This demonstration shows that the BLADE engine can handle Razor syntax by rendering a Microsoft's tutorial about the Razor.</p>
        <p>The original article is <a href="http://www.asp.net/web-pages/tutorials/basics/2-introduction-to-asp-net-web-programming-using-the-razor-syntax">here</a></p>
        <p><strong>Important notes:</strong></p>
        <ul>
            <li>While Razor syntax is honored, Blade does offer enhanced syntax of its own.</li>
            <li>C# grammar is honored completely.</li>
            <li>ASP.NET's API is <strong>not</strong> honored. This is an intended design. Eventhough it is easy to support, <a href="www.minh-hai.com">Hai</a> did not choose so because he wanted Blade to be usable in other scenarios, not just ASP.NET replacement.</li>
        </ul>
        <hr />
        <span>
            <div class="article-title keyline">
                <h1><div itemprop="name">Introduction to ASP.NET Web Programming Using the Razor Syntax (C#) <span></span></div></h1><div class="details">
                    <div class="author-header">
                        By
                        <a href="#author-43321" itemprop="author" class="print-no">Tom FitzMacken</a><span class="print-only-inline">Tom FitzMacken</span><span class="separator">|</span><time datetime="2014-02-07">February 7, 2014</time>
                    </div><div class="print-bar"><a href="javascript:window.print();">Print</a></div><div class="social-bar"><span class="social-item"><div class="fb-like fb_iframe_widget" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false" data-font="segoe ui" fb-xfbml-state="rendered" fb-iframe-plugin-query="app_id=&amp;font=segoe%20ui&amp;href=http%3A%2F%2Fwww.asp.net%2Fweb-pages%2Ftutorials%2Fbasics%2F2-introduction-to-asp-net-web-programming-using-the-razor-syntax&amp;layout=button_count&amp;locale=en_US&amp;sdk=joey&amp;send=false&amp;show_faces=false&amp;width=450"><span style="vertical-align: bottom; width: 76px; height: 20px;"><iframe name="f24d8517cc" width="450px" height="1000px" frameborder="0" allowtransparency="true" scrolling="no" title="fb:like Facebook Social Plugin" src="http://www.facebook.com/plugins/like.php?app_id=&amp;channel=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter%2FdgdTycPTSRj.js%3Fversion%3D40%23cb%3Df39a9b9aa%26domain%3Dwww.asp.net%26origin%3Dhttp%253A%252F%252Fwww.asp.net%252Ff26b867ba8%26relation%3Dparent.parent&amp;font=segoe%20ui&amp;href=http%3A%2F%2Fwww.asp.net%2Fweb-pages%2Ftutorials%2Fbasics%2F2-introduction-to-asp-net-web-programming-using-the-razor-syntax&amp;layout=button_count&amp;locale=en_US&amp;sdk=joey&amp;send=false&amp;show_faces=false&amp;width=450" class="" style="border: none; visibility: visible; width: 76px; height: 20px;"></iframe></span></div></span><span class="social-item"><a href="https://twitter.com/share" class="twitter-share-button" data-dnt="true" data-text="Intro to ASP.NET Web Programming Razor Syntax" style="display:none;">Tweet</a></span></div>
                </div>
            </div><div class="important important-box-article">
                <p>
                    This article gives you an overview of programming with ASP.NET Web Pages using
                    the Razor syntax. ASP.NET is Microsoft's technology for running dynamic web pages
                    on web servers. This articles focuses on using the C# programming language.
                </p>


                <p><strong>What you'll learn</strong>:</p>
                <ul>
                    <li>
                        The top 8 programming tips for getting started with programming ASP.NET
                        Web Pages using Razor syntax.
                    </li>
                    <li>Basic programming concepts you'll need.</li>
                    <li>What ASP.NET server code and the Razor syntax is all about.</li>
                </ul>
                <br>

                <h2 class="accordion"><span></span>Software versions</h2>
                <span style="display: none;">
                    <ul>
                        <li>ASP.NET Web Pages (Razor) 3</li>
                    </ul>
                    <br>
                    <p>This tutorial also works with ASP.NET Web Pages 2.</p>
                </span>
            </div>
            <h2>The Top 8 Programming Tips</h2>
            <p>
                This section lists a few tips that you absolutely need to know as you start writing
                ASP.NET server code using the Razor syntax.
            </p>
            <div class="note">
                <span class="dogear"></span>
                <p>
                    <strong>Note</strong>&nbsp;&nbsp; The Razor syntax is based on the C# programming
                    language, and that's the language that's used most often with ASP.NET
                    Web Pages. However, the Razor
                    syntax also supports the Visual Basic language, and everything you see you can also do in Visual Basic. For details, see the appendix
                    <a href="http://go.microsoft.com/fwlink/?LinkId=202908">
                        Visual Basic Language
                        and Syntax
                    </a>.
                </p>
            </div>

            <p>
                You can find more details about most of these programming techniques later in
                the article.
            </p>

            <h3>1. You add code to a page using the @@ character</h3>
            <p>
                The <code>@@</code> character starts inline expressions, single statement blocks,
                and multi-statement blocks:
            </p>
<pre class="prettyprint prettyprinted"><span class="com">&lt;!-- Single statement blocks  --&gt;</span><span class="pln">
@@{ var total = 7; }
@@{ var myMessage = "Hello World"; }
</span><span class="com">&lt;!-- Inline expressions --&gt;</span><span class="pln">
</span><span class="tag">&lt;p&gt;</span><span class="pln">The value of your account is: @@total </span><span class="tag">&lt;/p&gt;</span><span class="pln">
</span><span class="tag">&lt;p&gt;</span><span class="pln">The value of myMessage is: @@myMessage</span><span class="tag">&lt;/p&gt;</span><span class="pln">
</span><span class="com">&lt;!-- Multi-statement block --&gt;</span><span class="pln">
@@{
    var greeting = "Welcome to our site!";
    var weekDay = DateTime.Now.DayOfWeek;
    var greetingMessage = greeting + " Today is: " + weekDay;
}
</span><span class="tag">&lt;p&gt;</span><span class="pln">The greeting is: @@greetingMessage</span><span class="tag">&lt;/p&gt;</span></pre>

            <p>This is what these statements look like after BLADE renderation:</p>
            <div class="rendered">
                <!-- Single statement blocks  -->
                @{ var total = 7; }
                @{ var myMessage = "Hello World"; }
                <!-- Inline expressions -->
                <p>The value of your account is: @total </p>
                <p>The value of myMessage is: @myMessage</p>
                <!-- Multi-statement block -->
                @{
                    var greeting = "Welcome to our site!";
                    var weekDay = DateTime.Now.DayOfWeek;
                    var greetingMessage = greeting + " Today is: " + weekDay;
                }
                <p>The greeting is: @greetingMessage</p>
            </div>

            <div class="sidebar">
                <h3>HTML Encoding</h3>
                <p>
                    When you display content in a page using the <code>@@</code> character, as
                    in the preceding examples, ASP.NET HTML-encodes the output. This replaces reserved
                    HTML characters (such as <code>&lt;</code> and <code>&gt;</code> and <code>&amp;</code>) with codes that enable the characters
                    to be displayed as characters in a web page instead of being interpreted as
                    HTML tags or entities. Without HTML encoding, the output from your server code
                    might not display correctly, and could expose a page to security risks.
                </p>

                <p>
                    If your goal is to output HTML markup that renders tags as markup (for example
                    <code>&lt;p&gt;&lt;/p&gt;</code> for a paragraph or <code>&lt;em&gt;&lt;/em&gt;</code> to emphasize
                    text), see the section
                    <a href="#BM_CombiningTextMarkupAndCode">
                        Combining Text, Markup, and Code in Code Blocks
                    </a> later in this article.
                </p>
                <p>
                    You can read more about HTML encoding in
                    <a href="http://go.microsoft.com/fwlink/?LinkId=202892">Working with Forms</a>.
                </p>
            </div>



            <h3>2. You enclose code blocks in braces</h3>
            <p>A <em>code block</em> includes one or more code statements and is enclosed in braces.</p>

            <pre class="prettyprint prettyprinted"><span class="com">&lt;!-- Single statement block.  --&gt;</span><span class="pln">
        @@{ var theMonth = DateTime.Now.Month; }
        </span><span class="tag">&lt;p&gt;</span><span class="pln">The numeric value of the current month: @@theMonth</span><span class="tag">&lt;/p&gt;</span><span class="pln">
        </span><span class="com">&lt;!-- Multi-statement block. --&gt;</span><span class="pln">
        @@{
            var outsideTemp = 79;
            var weatherMessage = "Hello, it is " + outsideTemp + " degrees.";
        }
        </span><span class="tag">&lt;p&gt;</span><span class="pln">Today's weather: @@weatherMessage</span><span class="tag">&lt;/p&gt;</span></pre>

            <p>The rendered results:</p>
            <div class="rendered">
                <!-- Single statement block.  -->
                @{ var theMonth = DateTime.Now.Month; }
                <p>The numeric value of the current month: @theMonth</p>

                <!-- Multi-statement block. -->
                @{
                    var outsideTemp = 79;
                    var weatherMessage = "Hello, it is " + outsideTemp + " degrees.";
                }
                <p>Today's weather: @weatherMessage</p>
            </div>

            <h3>3. Inside a block, you end each code statement with a semicolon</h3>
            <p>
                Inside a code block, each complete code statement must end with a semicolon.
                Inline expressions don't end with a semicolon.
            </p>

            <pre class="prettyprint prettyprinted"><span class="com">&lt;!-- Single-statement block --&gt;</span><span class="pln">
        @@{ var theMonth = DateTime.Now.Month; }
        </span><span class="com">&lt;!-- Multi-statement block --&gt;</span><span class="pln">
        @@{
            var outsideTemp = 79;
            var weatherMessage = "Hello, it is " + outsideTemp + " degrees.";
        }
        </span><span class="com">&lt;!-- Inline expression, so no semicolon --&gt;</span><span class="pln">
        </span><span class="tag">&lt;p&gt;</span><span class="pln">Today's weather: @@weatherMessage</span><span class="tag">&lt;/p&gt;</span></pre>

            <div class="rendered">
                <!-- Inline expression, so no semicolon -->
                <p>Today's weather: @weatherMessage</p>
            </div>

            <h3>4. You use variables to store values</h3>
            <p>
                You can store values in a <em>variable</em>,
                including strings, numbers, and dates, etc. You create a new variable using the
                <code>var</code> keyword. You can insert variable values directly in a page using <code>@@</code>.
            </p>

            <pre class="prettyprint prettyprinted"><span class="com">&lt;!-- Storing a string --&gt;</span><span class="pln">
        @@{ var welcomeMessage = "Welcome, new members!"; }
        </span><span class="tag">&lt;p&gt;</span><span class="pln">@@welcomeMessage</span><span class="tag">&lt;/p&gt;</span><span class="pln">
        </span><span class="com">&lt;!-- Storing a date --&gt;</span><span class="pln">
        @@{ var year = DateTime.Now.Year; }
        </span><span class="com">&lt;!-- Displaying a variable --&gt;</span><span class="pln">
        </span><span class="tag">&lt;p&gt;</span><span class="pln">Welcome to our new members who joined in @@year!</span><span class="tag">&lt;/p&gt;</span></pre>

            <p>The result displayed in a browser:</p>
            <div class="rendered">
                <!-- Storing a string -->
                @{ var welcomeMessage = "Welcome, new members!"; }
                <p>@welcomeMessage</p>
                <!-- Storing a date -->
                @{ var year = DateTime.Now.Year; }
                <!-- Displaying a variable -->
                <p>Welcome to our new members who joined in @year!</p>
            </div>


            <h3 id="ID_StringLiterals">5. You enclose literal string values in double quotation marks</h3>
            <p>
                A <em>string</em> is a sequence
                of characters that are treated as text. To specify a string, you enclose it in double
                quotation marks:
            </p>

<pre class="prettyprint prettyprinted"><span class="pln">@@{ var myString = "This is a string literal"; }</span></pre>

            <p>
                If the string that you want to display contains a backslash character (\) or double quotation marks
                (&nbsp;<code>"</code>&nbsp;), use
                a <em>verbatim string literal</em>
                that's prefixed with the <code>@@</code> operator. (In C#, the \ character has special
                meaning unless you use a verbatim string literal.)
            </p>

<pre class="prettyprint prettyprinted"><span class="com">&lt;!-- Embedding a backslash in a string --&gt;</span><span class="pln">
@@{ var myFilePath = @@"C:\MyFolder\"; }
</span><span class="tag">&lt;p&gt;</span><span class="pln">The path is: @@myFilePath</span><span class="tag">&lt;/p&gt;</span></pre>

            <p>
                To embed double quotation marks, use a verbatim string literal and repeat the
                quotation marks:
            </p>

<pre class="prettyprint prettyprinted"><span class="com">&lt;!-- Embedding double quotation marks in a string --&gt;</span><span class="pln">
@@{ var myQuote = @@"The person said: ""Hello, today is Monday."""; }
</span><span class="tag">&lt;p&gt;</span><span class="pln">@@myQuote</span><span class="tag">&lt;/p&gt;</span></pre>

            <p>Here's the result of using both of these examples in a page:</p>

            <div class="rendered">
                @{ var myString = "This is a string literal"; }
                <!-- Embedding a backslash in a string -->
                @{ var myFilePath = @"C:\MyFolder\"; }
                <p>The path is: @myFilePath</p>
                <!-- Embedding double quotation marks in a string -->
                @{ var myQuote = @"The person said: ""Hello, today is Monday."""; }
                <p>@myQuote</p>
            </div>


            <div class="note">
                <span class="dogear"></span>
                <p>
                    <strong>Note</strong>&nbsp;&nbsp; Notice that the <code>@@</code> character is used both to
                    mark verbatim string literals in C# and to mark code in ASP.NET pages.&nbsp;
                </p>
            </div>


            <h3>6. Code is case sensitive</h3>
            <p>
                In C#, keywords (like <code>var</code>, <code>true</code>, and <code>if</code>) and variable names are case sensitive.
                The following lines of code create two different variables, <code>lastName</code>
                and <code>LastName.</code>
            </p>

<pre class="prettyprint prettyprinted"><span class="pln">@@{
    var lastName = "Smith";
    var LastName = "Jones";
}</span></pre>

            <p>
                If you declare a variable as <code>var lastName&nbsp;=&nbsp;"Smith";</code> and if you
                try to reference that variable in your page as <code>@@LastName</code>, an error
                results because <code>LastName</code> won't be recognized.
            </p>
            <div class="note">
                <span class="dogear"></span>
                <p>
                    <strong>Note</strong>&nbsp;&nbsp; In Visual Basic, keywords and variables are <em>not</em> case
                    sensitive.
                </p>
            </div>


            <h3>7. Much of your coding involves objects</h3>
            <p>
                An <em>object</em> represents a thing that you can program with — a page, a text box, a
                file, an image, a web request, an email message, a customer record (database row),
                etc. Objects have properties that describe their characteristics and that you
                can read or change — a text box object
                has a <code>Text</code> property (among others), a request object has a <code>Url</code> property, an email
                message has a <code>From</code> property, and a customer object has a <code>FirstName</code> property. Objects
                also have methods that are the "verbs" they can perform. Examples include a file
                object's <code>Save</code> method, an image object's <code>Rotate</code> method, and an email object's
                <code>Send</code>
                method.
            </p>
            <p>
                You'll often work with the <code>Request</code> object, which gives you information like the
                values of text boxes (form fields) on the page, what type of browser made
                the request, the URL of the page, the user identity, etc. The following example shows how
                to access properties of the <code>Request</code> object and how to call the
                <code>MapPath</code> method of
                the <code>Request</code> object, which gives you the absolute path of the page on the server:<br>
            </p>

            <pre class="prettyprint prettyprinted"><span class="tag">&lt;table</span><span class="pln"> </span><span class="atn">border</span><span class="pun">=</span><span class="atv">"1"</span><span class="tag">&gt;</span><span class="pln">
            </span><span class="tag">&lt;tr&gt;</span><span class="pln">
                </span><span class="tag">&lt;td&gt;</span><span class="pln">URI</span><span class="tag">&lt;/td&gt;</span><span class="pln">
                </span><span class="tag">&lt;td&gt;</span><span class="pln">Raw path</span><span class="tag">&lt;/td&gt;</span><span class="pln">
                </span><span class="tag">&lt;td&gt;</span><span class="pln">Host</span><span class="tag">&lt;/td&gt;</span><span class="pln">
                </span><span class="tag">&lt;td&gt;</span><span class="pln">Method</span><span class="tag">&lt;/td&gt;</span><span class="pln">
                </span><span class="tag">&lt;td&gt;</span><span class="pln">User Agent</span><span class="tag">&lt;/td&gt;</span><span class="pln">
            </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
            </span><span class="tag">&lt;tr&gt;</span><span class="pln">
                </span><span class="tag">&lt;td&gt;</span><span class="pln">@@Request.Uri</span><span class="tag">&lt;/td&gt;</span><span class="pln">
                </span><span class="tag">&lt;td&gt;</span><span class="pln">@@Request.Path</span><span class="tag">&lt;/td&gt;</span><span class="pln">
                </span><span class="tag">&lt;td&gt;</span><span class="pln">@@Request.Host</span><span class="tag">&lt;/td&gt;</span><span class="pln">
                </span><span class="tag">&lt;td&gt;</span><span class="pln">@@Request.Method</span><span class="tag">&lt;/td&gt;</span><span class="pln">
                </span><span class="tag">&lt;td&gt;</span><span class="pln">@@Request.UserAgent</span><span class="tag">&lt;/td&gt;</span><span class="pln">
            </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
            </span><span class="tag">&lt;/table&gt;</span></pre>

            <p>The rendered results:</p>

            <div class="rendered">
                <table border="2">
                    <tr>
                        <td>URL</td>
                        <td>Raw path</td>
                        <td>Host</td>
                        <td>Method</td>
                        <td>User Agent</td>
                    </tr>
                    <tr>
                        <td> @Request.Url</td>
                        <td> @Request.Path</td>
                        <td> @Request.Host</td>
                        <td> @Request.Method</td>
                        <td> @Request.UserAgent</td>
                    </tr>
                </table>
            </div>

            <h3>8. You can write code that makes decisions</h3>

            <p>
                A key feature of dynamic web pages is that you can determine what to do based
                on conditions. The most common way to do this is with the<code> if</code> statement
                (and optional <code>else</code> statement).
            </p>

            <pre class="prettyprint prettyprinted"><span class="pln">@@{
                    var result = "";                    
                    if (DateTime.Now.Year == 2014)
                    {
                        result = "The current year is 2014";
                    }
                    else
                    {
                        result = "The current year is NOT 2014";
                    }
                }
                </span>
                <span class="tag">&lt;div&gt;</span>
                @@result
                <span class="tag">&lt;/div&gt;</span>
            </pre>


            <p>
                The statement <code>if(IsPost)</code> is a shorthand way of writing <code>if(IsPost&nbsp;==&nbsp;true)</code>.
                Along with <code>if</code> statements, there are a variety of ways to test conditions,
                repeat blocks of code, and so on, which are described later in this article.
            </p>
            <p>
                The result displayed in a browser (after clicking
                <strong>Submit</strong>):
            </p>

            <p>Rendered results:</p>
            <div class="rendered">
                @{
                    var result = "";                    
                    if (DateTime.Now.Year == 2014)
                    {
                        result = "The current year is 2014";
                    }
                    else
                    {
                        result = "The current year is NOT 2014";
                    }
                }
                <div>@result</div>
            </div>

            <h2>A Simple Code Example</h2>
            <p>
                This procedure shows you how to create a page that illustrates basic programming
                techniques. In the example, you create a page that lets users enter two numbers,
                then it adds them and displays the result.
            </p>
            <ol>
                <li>
                    In your editor, create a new file and name it
                    <em>AddNumbers.cshtml</em>.
                </li>
                <li>
                    Copy the following code and markup into the page, replacing anything already
                    in the page.<br>
                    <pre class="prettyprint prettyprinted"><span class="pln">@@{
    var total = 0;
    var totalMessage = "";
    if(IsPost) {
        // Retrieve the numbers that the user entered.
        var num1 = Request["text1"];
        var num2 = Request["text2"];
        
        // Convert the entered strings into integers numbers and add.
        int value1 = int.Parse(num1);
        int value2 = int.Parse(num2);
        
        //calculate and display
        total = value1 + value2;
        totalMessage = "Total = " + total;
    }
}
</span><span class="dec">&lt;!DOCTYPE html&gt;</span><span class="pln">
</span><span class="tag">&lt;html</span><span class="pln"> </span><span class="atn">lang</span><span class="pun">=</span><span class="atv">"en"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;head&gt;</span><span class="pln">
    </span><span class="tag">&lt;title&gt;</span><span class="pln">Add Numbers</span><span class="tag">&lt;/title&gt;</span><span class="pln">
    </span><span class="tag">&lt;meta</span><span class="pln"> </span><span class="atn">charset</span><span class="pun">=</span><span class="atv">"utf-8"</span><span class="pln"> </span><span class="tag">/&gt;</span><span class="pln">
    </span><span class="tag">&lt;style</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text/css"</span><span class="tag">&gt;</span><span class="pln">
      body </span><span class="pun">{</span><span class="kwd">background-color</span><span class="pun">:</span><span class="pln"> beige</span><span class="pun">;</span><span class="pln"> </span><span class="kwd">font-family</span><span class="pun">:</span><span class="pln"> Verdana</span><span class="pun">,</span><span class="pln"> Arial</span><span class="pun">;</span><span class="pln">
            </span><span class="kwd">margin</span><span class="pun">:</span><span class="pln"> </span><span class="lit">50px</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln">
      form </span><span class="pun">{</span><span class="kwd">padding</span><span class="pun">:</span><span class="pln"> </span><span class="lit">10px</span><span class="pun">;</span><span class="pln"> </span><span class="kwd">border-style</span><span class="pun">:</span><span class="pln"> solid</span><span class="pun">;</span><span class="pln"> </span><span class="kwd">width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">250px</span><span class="pun">;}</span><span class="pln">
    </span><span class="tag">&lt;/style&gt;</span><span class="pln">
  </span><span class="tag">&lt;/head&gt;</span><span class="pln">
</span><span class="tag">&lt;body&gt;</span><span class="pln">
  </span><span class="tag">&lt;p&gt;</span><span class="pln">Enter two whole numbers and then click </span><span class="tag">&lt;strong&gt;</span><span class="pln">Add</span><span class="tag">&lt;/strong&gt;</span><span class="pln">.</span><span class="tag">&lt;/p&gt;</span><span class="pln">
  </span><span class="tag">&lt;form</span><span class="pln"> </span><span class="atn">action</span><span class="pun">=</span><span class="atv">""</span><span class="pln"> </span><span class="atn">method</span><span class="pun">=</span><span class="atv">"post"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;p&gt;&lt;label</span><span class="pln"> </span><span class="atn">for</span><span class="pun">=</span><span class="atv">"text1"</span><span class="tag">&gt;</span><span class="pln">First Number:</span><span class="tag">&lt;/label&gt;</span><span class="pln">
      </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"text1"</span><span class="pln"> </span><span class="tag">/&gt;</span><span class="pln">
    </span><span class="tag">&lt;/p&gt;</span><span class="pln">
    </span><span class="tag">&lt;p&gt;&lt;label</span><span class="pln"> </span><span class="atn">for</span><span class="pun">=</span><span class="atv">"text2"</span><span class="tag">&gt;</span><span class="pln">Second Number:</span><span class="tag">&lt;/label&gt;</span><span class="pln">
      </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"text2"</span><span class="pln"> </span><span class="tag">/&gt;</span><span class="pln">
    </span><span class="tag">&lt;/p&gt;</span><span class="pln">
    </span><span class="tag">&lt;p&gt;&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"submit"</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"Add"</span><span class="pln"> </span><span class="tag">/&gt;&lt;/p&gt;</span><span class="pln">
  </span><span class="tag">&lt;/form&gt;</span><span class="pln">
  </span><span class="tag">&lt;p&gt;</span><span class="pln">@@totalMessage</span><span class="tag">&lt;/p&gt;</span><span class="pln">
</span><span class="tag">&lt;/body&gt;</span><span class="pln">
</span><span class="tag">&lt;/html&gt;</span></pre>
                    <p>Here are some things for you to note:</p>
                    <ul>
                        <li>
                            <p>
                                The <code>@@</code> character starts the first block of code in the page, and it precedes
                                the <code>totalMessage</code> variable that's embedded near the bottom of the page.
                            </p>
                        </li>
                        <li><p>The block at the top of the page is enclosed in braces.</p></li>
                        <li><p>In the block at the top, all lines end with a semicolon.</p></li>
                        <li>
                            <p>
                                The variables <code>total</code>, <code>num1</code>, <code>num2</code>, and
                                <code>totalMessage</code> store several numbers and a string.
                            </p>
                        </li>
                        <li>
                            <p>
                                The literal string value assigned to the <code>totalMessage</code> variable is in
                                double quotation marks.
                            </p>
                        </li>
                        <li>
                            <p>
                                Because the code is case-sensitive, when the <code>totalMessage</code> variable is
                                used near the bottom of the page, its name must match the variable at the
                                top exactly.
                            </p>
                        </li>
                        <li>
                            <p>
                                The <code>&lt;form&gt;</code> tag includes a <code>method="post"</code> attribute. This specifies that
                                when the user clicks <strong>Add</strong>, the page will be sent to the server using the
                                HTTP POST method. When the page is submitted, the <code>if(IsPost)</code> test evaluates
                                to true and the conditional code runs, displaying the result of adding
                                the numbers.
                            </p>
                        </li>
                    </ul>
                </li>
                <li>
                    Save the page and run it in a browser. (Make sure the page is selected
                    in the <strong>Files</strong> workspace before you run it.) Enter two whole numbers and then
                    click the <strong>Add</strong> button.                    
                </li>
                <li>
                    <a href="AddNumbers.cshtml">Click here to a see this example as rendered</a>
                </li>
            </ol>
            <h2>Basic Programming Concepts</h2>
            <p>
                This article provides you with an overview of ASP.NET web programming. It isn't
                an exhaustive examination, just a quick tour through the programming concepts you'll
                use most often. Even so, it covers almost everything you'll need to get started
                with ASP.NET Web Pages.
            </p>
            <p>But first, a little technical background.</p>

            <h3>The Razor Syntax, Server Code, and ASP.NET</h3>
            <p>
                Razor syntax is a simple programming syntax for embedding server-based code in
                a web page. In a web page that uses the Razor syntax, there are two kinds of content:
                client content and server code. Client content is the stuff you're used to in web
                pages: HTML markup (elements), style information such as CSS, maybe some client script such
                as JavaScript, and plain text.
            </p>
            <p>
                Razor syntax lets you add server code to this client content. If there's server
                code in the page, the server runs that code first, before it sends the page to the
                browser. By running on the server, the code can perform tasks that can be a lot
                more complex to do using client content alone, like accessing server-based databases.
                Most importantly, server code can dynamically create client content — it can generate
                HTML markup or other content on the fly and then send it to the browser along with
                any static HTML that the page might contain. From the browser's perspective, client
                content that's generated by your server code is no different than any other client
                content. As you've already seen, the server code that's required is quite simple.
            </p>
            <p>
                ASP.NET web pages that include the Razor syntax have a special file extension
                (<em>.cshtml</em> or <em>.vbhtml</em>). The server recognizes these extensions, runs the code that's
                marked with Razor syntax, and then sends the page to the browser.
            </p>

            <h3>Where does ASP.NET fit in?</h3>
            <p>
                Razor syntax is based on a technology from Microsoft called ASP.NET, which in
                turn is based on the Microsoft .NET Framework. The.NET Framework is a big, comprehensive
                programming framework from Microsoft for developing virtually any type of computer
                application. ASP.NET is the part of the .NET Framework that's specifically designed
                for creating web applications. Developers have used ASP.NET to create many of the
                largest and highest-traffic websites in the world. (Any time you see the file-name
                extension <em>.aspx</em> as part of the URL in a site, you'll know that the site was written
                using ASP.NET.)
            </p>
            <p>
                The Razor syntax gives you all the power of ASP.NET, but using a simplified syntax
                that's easier to learn if you're a beginner and that makes you more productive if
                you're an expert. Even though this syntax is simple to use, its family relationship
                to ASP.NET and the .NET Framework means that as your websites become more sophisticated,
                you have the power of the larger frameworks available to you.
            </p>

            <p><img alt="Razor-Img8" src="http://i1.asp.net/media/38815/Razor_programmingintro-8.jpg?cdn_id=2014-04-02-001"></p>

            <div class="sidebar">
                <h3>Classes and Instances</h3>
                <p>
                    ASP.NET server code uses objects, which are in turn built on the idea of
                    classes. The class is the definition or template for an object. For example,
                    an application might contain a <code>Customer</code> class that defines the properties and
                    methods that any customer object needs.
                </p>
                <p>
                    When the application needs to work with actual customer information, it creates
                    an instance of (or <em>instantiates</em>) a customer object. Each individual customer
                    is a separate instance of the <code>Customer</code> class. Every instance supports the same
                    properties and methods, but the property values for each instance are typically
                    different, because each customer object is unique. In one customer object, the
                    <code>LastName</code> property might be "Smith"; in another customer object, the <code>LastName</code>
                    property might be "Jones."
                </p>
                <p>
                    Similarly, any individual web page in your site is a <code>Page</code> object that's an
                    instance of the <code>Page</code> class. A button on the page is a <code>Button</code> object that
                    is an instance of the <code>Button</code> class, and so on. Each instance has its own characteristics,
                    but they all are based on what's specified in the object's class definition.
                </p>
            </div>

            <h2>Basic Syntax</h2>
            <p>
                Earlier you saw a basic example of how to create an ASP.NET Web Pages page,
                and how you can add server code to HTML markup. Here you'll learn the basics of
                writing ASP.NET server code using the Razor syntax — that is, the programming language
                rules.
            </p>
            <p>
                If you're experienced with programming (especially if you've used C, C++, C#,
                Visual Basic, or JavaScript), much of what you read here will be familiar. You'll
                probably need to familiarize yourself only with how server code is added to markup
                in <em>.cshtml</em> files.
            </p>

            <h3 id="BM_CombiningTextMarkupAndCode">Combining Text, Markup, and Code in Code Blocks</h3>
            <p>
                In server code blocks, you often want to output text or markup (or both) to the
                page. If a server code block contains text that's not code and that instead should
                be rendered as is, ASP.NET needs to be able to distinguish that text from code.
                There are several ways to do this.
            </p>
            <ul>
                <li>
                    Enclose the text in an HTML element like <code>&lt;p&gt;&lt;/p&gt;</code> or
                    <code>&lt;em&gt;&lt;/em&gt;</code>: <br>

                    <pre class="prettyprint prettyprinted"><span class="pln">@@if(IsPost) {
                        // This line has all content between matched </span><span class="tag">&lt;p&gt;</span><span class="pln"> tags.
                        </span><span class="tag">&lt;p&gt;</span><span class="pln">Hello, the time is @@DateTime.Now and this page is a postback!</span><span class="tag">&lt;/p&gt;</span><span class="pln">
                    } else {
                        // All content between matched tags, followed by server code.
                        </span><span class="tag">&lt;p&gt;</span><span class="pln">Hello </span><span class="tag">&lt;em&gt;</span><span class="pln">stranger</span><span class="tag">&lt;/em&gt;</span><span class="pln">, today is: </span><span class="tag">&lt;br</span><span class="pln"> </span><span class="tag">/&gt;</span><span class="pln"> </span><span class="tag">&lt;/p&gt;</span><span class="pln">  @@DateTime.Now
                    }</span></pre>

                    <p>Rendered results</p>
                    <div class="rendered">
                        @if (IsPost)
                        {
                            // This line has all content between matched <p> tags.
                            <p>Hello, the time is @DateTime.Now and this page is a postback!</p>
                        }
                        else
                        {
                            // All content between matched tags, followed by server code.
                            <p>Hello <em>stranger</em>, today is: <br /> </p> @DateTime.Now                            
                        }
                    </div>
                    <p>
                        The HTML element can include text, additional HTML elements, and server-code
                        expressions. When ASP.NET sees the opening HTML tag (for example, <code>&lt;p&gt;</code>), it renders everything
                        including the
                        element and its content as is to the browser, resolving server-code expressions
                        as it goes.
                    </p>
                </li>
                <li>
                    Use the <code>@@:</code> operator or the <code>&lt;text&gt;</code> element. The
                    <code>@@:</code> outputs a single line of content containing plain text or unmatched
                    HTML tags; the <code>&lt;text&gt;</code> element encloses multiple lines to output.
                    These options are useful when you don't want to render an HTML element as part
                    of the output.<br>

                    <pre class="prettyprint prettyprinted"><span class="pln">@@if(IsPost) {
    // Plain text followed by an unmatched HTML tag and server code.
    @@: The time is: </span><span class="tag">&lt;br</span><span class="pln"> </span><span class="tag">/&gt;</span><span class="pln"> @@DateTime.Now
    </span><span class="tag">&lt;br/&gt;</span><span class="pln">
    // Server code and then plain text, matched tags, and more text.
    @@DateTime.Now @@:is the </span><span class="tag">&lt;em&gt;</span><span class="pln">current</span><span class="tag">&lt;/em&gt;</span><span class="pln"> time.
}</span></pre>
                    <p>Rendered results:</p>
                    <div class="rendered">
                       @if (IsPost)
                        {
                            // Plain text followed by an unmatched HTML tag and server code.
                            @: The time is: <br /> @DateTime.Now
                            <br />
                            // Server code and then plain text, matched tags, and more text.
                            @DateTime.Now @:is the <em>current</em> time.
                        }
                    </div>
                    <p>
                        If you want to output multiple lines of text or unmatched HTML tags, you
                        can precede each line with <code>@@:</code>, or you can enclose the line in a
                        <code>&lt;text&gt;</code> element.
                        Like the <code>@@:</code> operator,<code> &lt;text&gt;</code> tags are used by ASP.NET to identify text content
                        and are never rendered in the page output.
                    </p>

                    <pre class="prettyprint prettyprinted"><span class="pln">@@if(IsPost) {
    // Repeat the previous example, but use </span><span class="tag">&lt;text&gt;</span><span class="pln"> tags.
    </span><span class="tag">&lt;text&gt;</span><span class="pln">
    The time is: </span><span class="tag">&lt;br</span><span class="pln"> </span><span class="tag">/&gt;</span><span class="pln"> @@DateTime.Now
    </span><span class="tag">&lt;br/&gt;</span><span class="pln">
    @@DateTime.Now is the </span><span class="tag">&lt;em&gt;</span><span class="pln">current</span><span class="tag">&lt;/em&gt;</span><span class="pln"> time.
    </span><span class="tag">&lt;/text&gt;</span><span class="pln">
}
@@{
    var minTemp = 75;
    </span><span class="tag">&lt;text&gt;</span><span class="pln">It is the month of @@DateTime.Now.ToString("MMMM"), and
    it's a </span><span class="tag">&lt;em&gt;</span><span class="pln">great</span><span class="tag">&lt;/em&gt;</span><span class="pln"> day! </span><span class="tag">&lt;br</span><span class="pln"> </span><span class="tag">/&gt;&lt;p&gt;</span><span class="pln">You can go swimming if it's at
    least @@minTemp degrees. </span><span class="tag">&lt;/p&gt;&lt;/text&gt;</span><span class="pln">
}</span></pre>

                    <p>Rendered results</p>
                    <div class="rendered">
                        @if (IsPost)
                        {
                            // Repeat the previous example, but use <text> tags.
                            <text>
                                The time is: <br /> @DateTime.Now
                                <br />
                                @DateTime.Now is the <em>current</em> time.
                            </text>
                        }
                        @{
                            var minTemp = 75;
                            <text>It is the month of @DateTime.Now.ToString("MMMM"), and
                            it's a <em>great</em> day! <br /><p>
                                You can go swimming if it's at
                                least @minTemp degrees.
                            </p></text>                        
                        }
                    </div>
                    <p>
                        The first example repeats the previous example but uses a single pair
                        of <code>&lt;text&gt;</code> tags to enclose the text to render. In the second example, the
                        <code>&lt;text&gt;</code>
                        and <code>&lt;/text&gt;</code> tags enclose three lines, all of which have some uncontained text
                        and unmatched HTML tags (<code>&lt;br /&gt;</code>), along with server code and matched HTML tags.
                        Again, you could also precede each line individually with the <code>@@:</code> operator; either
                        way works.
                    </p>
                    <div class="note">
                        <span class="dogear"></span>
                        <p>
                            <strong>Note</strong>&nbsp;&nbsp; When you output text as shown in this
                            section — using an HTML element, the <code>@@:</code> operator, or the
                            <code>&lt;text&gt;</code> element
                            — ASP.NET doesn't HTML-encode the output. (As noted earlier, ASP.NET does
                            encode the output of server code expressions and server code blocks that
                            are preceded by <code>@@</code>, except in the special cases noted in this section.)
                        </p>
                    </div>
                </li>
            </ul>
            <h3>Whitespace</h3>
            <p>
                Extra spaces in a statement (and outside of a string literal) don't affect the
                statement:
            </p>

<pre class="prettyprint prettyprinted"><span class="pln">@@{ var lastName =    "Smith"; }</span></pre>
            <p>
                A line break in a statement has no effect on the statement, and you can wrap
                statements for readability. The following statements are the same:
            </p>
<pre class="prettyprint prettyprinted"><span class="pln">@@{ var theName =
"Smith"; }
@@{
    var
    personName
    =
    "Smith"
    ;
} </span></pre>

            <p>
                However, you can't wrap a line in the middle of a string literal. The following
                example doesn't&nbsp; work:
            </p>

<pre class="prettyprint prettyprinted"><span class="pln">@@{ var test = "This is a long
    string"; }  // Does not work!</span></pre>
            <p>
                To combine a long string that wraps to multiple lines like the above code, there
                are two options. You can use the concatenation operator (<code>+</code>), which you'll see later
                in this article. You can also use the <code>@@</code> character to create a verbatim string literal,
                as you saw earlier in this article. You can break verbatim string literals across
                lines:
            </p>
<pre class="prettyprint prettyprinted"><span class="pln">@@{ var longString = @@"This is a
    long
    string";
}</span></pre>
            <h3>Code (and Markup) Comments</h3>
            <p>
                Comments let you leave notes for yourself or others. They also allow you to
                disable (<em>comment out</em>) a section of code or markup that you
                don't want to run but
                want to keep in your page for the time being.
            </p>
            <p>
                There's different commenting syntax for Razor code and
                for HTML markup. As with all Razor code, Razor comments are processed (and then removed) on
                the server before the page is sent to the browser. Therefore, the Razor
                commenting syntax lets you put comments into the code (or even into the markup)
                that you can see when you edit the file, but that users don't see, even in the
                page source.
            </p>
            <p>
                For ASP.NET Razor comments, you start the comment with <code>@@*</code> and
                end it with <code>*@@</code>. The comment can be
                on one line or multiple lines:
            </p>
<pre class="prettyprint prettyprinted"><span class="pln">@@*  A one-line code comment. *@@
@@*
    This is a multiline code comment.
    It can continue for any number of lines.
*@@	</span></pre>
            <p>Here is a comment within a code block:</p>
<pre class="prettyprint prettyprinted"><span class="pln">@@{
    @@* This is a comment. *@@
    var theVar = 17;
} </span></pre>
            <p>
                Here is the same block of code, with the line of code commented out
                so that it won't run:
            </p>
<pre class="prettyprint prettyprinted"><span class="pln">@@{
    @@* This is a comment. *@@
    @@* var theVar = 17;  *@@
} </span></pre>
            <p>
                Inside a code block, as an alternative to using Razor comment syntax,
                you can use the commenting syntax of the programming language you're using, such as C#:
            </p>
<pre class="prettyprint prettyprinted"><span class="pln">@@{
    // This is a comment.
    var myVar = 17;
    /* This is a multi-line comment
    that uses C# commenting syntax. */
}</span></pre>
            <p>
                In C#, single-line comments are preceded by the <code>//</code> characters,
                and multi-line comments begin with <code>/*</code>
                and end with <code>*/</code>. (As with Razor comments, C# comments are not
                rendered to the browser.)
            </p>
            <p>For markup, as you probably know, you can create an HTML comment:</p>
<pre class="prettyprint prettyprinted"><span class="com">&lt;!-- This is a comment.  --&gt;</span></pre>
            <p>
                HTML comments start with <code>&lt;!--</code> characters and
                end with <code>--&gt;</code>. You can use HTML comments to surround not only
                text, but also any HTML markup that you may want to keep in the page
                but don't want to render. This HTML comment will hide the entire content of the tags and the text they
                contain:
            </p>
<pre class="prettyprint prettyprinted"><span class="com">&lt;!-- &lt;p&gt;This is my paragraph.&lt;/p&gt;  --&gt;</span></pre>
            <p>
                Unlike Razor comments, HTML comments <em>are</em> rendered to the page and
                the user can see them by viewing the page source.
            </p>
            <h2>Variables</h2>
            <p>
                A variable is a named object that you use to store data. You can name variables
                anything, but the name must begin with an alphabetic character and it cannot contain
                whitespace or reserved characters.
            </p>
            <h3>Variables and Data Types</h3>
            <p>
                A variable can have a specific data type, which indicates what kind of data is
                stored in the variable. You can have string variables that store string values (like
                "Hello world"), integer variables that store whole-number values (like 3 or 79),
                and date variables that store date values in a variety of formats (like 4/12/2012
                or March 2009). And there are many other data types you can use.
            </p>
            <p>
                However, you generally don't have to specify a type for a variable. Most of the time, ASP.NET can figure
                out the type based on how the data in the variable is being used. (Occasionally
                you must specify a type; you'll see examples where this is true.)
            </p>
            <p>
                You declare a variable using the <code>var</code> keyword (if you don't want to specify a
                type) or by using the name of the type:
            </p>
                <pre class="prettyprint prettyprinted"><span class="pln">@@{
                    // Assigning a string to a variable.
                    var greetingMsg = "Welcome!";
                    // Assigning a number to a variable.
                    var theCount = 3;
                    // Assigning an expression to a variable.
                    var monthlyTotal = theCount + 5;
                    // Assigning a date value to a variable.
                    var today = DateTime.Today;
                    // Assigning the current page's URL to a variable.
                    var myPath = this.Request.Url;
                    // Declaring variables using explicit data types.
                    string name = "Joe";
                    int count = 5;
                    DateTime tomorrow = DateTime.Now.AddDays(1);
                }</span></pre>            
            <p>The following example shows some typical uses of variables in a web page:</p>
                <pre class="prettyprint prettyprinted"><span class="pln">@@{
                    // Embedding the value of a variable into HTML markup.
                    </span><span class="tag">&lt;p&gt;</span><span class="pln">@@greetingMsg, friends!</span><span class="tag">&lt;/p&gt;</span><span class="pln">
                    // Using variables as part of an inline expression.
                    </span><span class="tag">&lt;p&gt;</span><span class="pln">The predicted annual total is: @@( monthlyTotal * 12)</span><span class="tag">&lt;/p&gt;</span><span class="pln">
                    // Displaying the page URL with a variable.
                    </span><span class="tag">&lt;p&gt;</span><span class="pln">The URL to this page is: @@myPath</span><span class="tag">&lt;/p&gt;</span><span class="pln">
                }</span></pre>
            <p>
                Rendered results:
            </p>
            <div class="rendered">
                @{
    // Assigning a string to a variable.
                    var greetingMsg = "Welcome!";

                    // Assigning a number to a variable.
                    var theCount = 3;

                    // Assigning an expression to a variable.
                    var monthlyTotal = theCount + 5;

                    // Assigning a date value to a variable.
                    var today = DateTime.Today;

                    // Assigning the current page's URL to a variable.
                    var myPath = this.Request.Url;

                    // Declaring variables using explicit data types.
                    string name = "Joe";
                    int count = 5;
                    DateTime tomorrow = DateTime.Now.AddDays(1);
                }

                @{
                    // Embedding the value of a variable into HTML markup.
                            <p>@greetingMsg, friends!</p>

                    // Using variables as part of an inline expression.
                            <p>The predicted annual total is: @( monthlyTotal * 12)</p>

                    // Displaying the page URL with a variable.
                            <p>The URL to this page is: @myPath</p>
                }
            </div>
            
            <h2>Conditional Logic and Loops</h2>
            <p>
                ASP.NET server code lets you perform tasks based on conditions and write code
                that repeats statements a specific number of times (that is, code that runs a loop).
            </p>
            <h3>Testing Conditions</h3>
            <p>
                To test a simple condition you use the <code>if</code> statement, which returns true or false
                based on a test you specify:
            </p>
            <pre class="prettyprint prettyprinted"><span class="pln">@@{
              var showToday = true;
              if(showToday)
              {
                @@DateTime.Today;
              }
            }</span></pre>
            <div class="rendered">
                @{
                    var showToday = true;
                    if (showToday)
                    {
                        @DateTime.Today;
                    }
                }
            </div>
            <p>
                The <code>if</code> keyword starts a block. The actual test (condition) is in parentheses
                and returns true or false. The statements that run if the test is true are enclosed
                in braces. An <code>if</code> statement can include an <code>else</code> block that specifies statements to
                run if the condition is false:
            </p>
            <pre class="prettyprint prettyprinted"><span class="pln">@@{
              var showToday = false;
              if(showToday)
              {
                @@DateTime.Today;
              }
              else
              {
                </span><span class="tag">&lt;text&gt;</span><span class="pln">Sorry!</span><span class="tag">&lt;/text&gt;</span><span class="pln">
              }
            }</span></pre>
            <div class="rendered">
                @{
                    var showToday2 = false;
                    if (showToday2)
                    {
                        @DateTime.Today;
                    }
                    else
                    {
                        <text>Sorry!</text>
                    }
                }
            </div>
            <p>You can add multiple conditions using an <code>else if</code> block: </p>
            <pre class="prettyprint prettyprinted"><span class="pln">@@{
                var theBalance = 4.99;
                if(theBalance == 0)
                {
                    </span><span class="tag">&lt;p&gt;</span><span class="pln">You have a zero balance.</span><span class="tag">&lt;/p&gt;</span><span class="pln">
                }
                else if (theBalance  &gt; 0 &amp;&amp; theBalance &lt;= 5)
                {
                    </span><span class="tag">&lt;p&gt;</span><span class="pln">Your balance of $@@theBalance is very low.</span><span class="tag">&lt;/p&gt;</span><span class="pln">
                }
                else
                {
                    </span><span class="tag">&lt;p&gt;</span><span class="pln">Your balance is: $@@theBalance</span><span class="tag">&lt;/p&gt;</span><span class="pln">
                }
            }</span></pre>
            <div class="rendered">
               @{
                    var theBalance = 4.99;
                    if (theBalance == 0)
                    {
                        <p>You have a zero balance.</p>
                    }
                    else if (theBalance > 0 && theBalance <= 5)
                    {
                        <p>Your balance of $@theBalance is very low.</p>
                    }
                    else
                    {
                        <p>Your balance is: $@theBalance</p>
                    }
                }
            </div>
            <p>
                In this example, if the first condition in the if block is not true, the
                <code>
                    else
                    if
                </code> condition is checked. If that condition is met, the statements in the
                <code>else if</code>
                block are executed. If none of the conditions are met, the statements in the
                <code>else</code>
                block are executed. You can add any number of else if blocks, and then close with
                an <code>else</code> block as the "everything else" condition.
            </p>
            <p>To test a large number of conditions, use a <code>switch</code> block:<br></p>
            <pre class="prettyprint prettyprinted"><span class="pln">@@{
                var weekday = "Wednesday";
                var greeting = "";
                switch(weekday)
                {
                    case "Monday":
                        greeting = "Ok, it's a marvelous Monday";
                        break;
                    case "Tuesday":
                        greeting = "It's a tremendous Tuesday";
                        break;
                    case "Wednesday":
                        greeting = "Wild Wednesday is here!";
                        break;
                    default:
                        greeting = "It's some other day, oh well.";
                        break;
                }
                </span><span class="tag">&lt;p&gt;</span><span class="pln">Since it is @@weekday, the message for today is: @@greeting</span><span class="tag">&lt;/p&gt;</span><span class="pln">
            }</span></pre>
            <p>Rendered results:</p>
            <div class="rendered">
                @{
                    var weekday = "Wednesday";
                    var greeting3 = "";
                    switch (weekday)
                    {
                        case "Monday":
                            greeting3 = "Ok, it's a marvelous Monday";
                            break;
                        case "Tuesday":
                            greeting3 = "It's a tremendous Tuesday";
                            break;
                        case "Wednesday":
                            greeting3 = "Wild Wednesday is here!";
                            break;
                        default:
                            greeting3 = "It's some other day, oh well.";
                            break;
                    }
                    <p>Since it is @weekday, the message for today is: @greeting</p>
                }
            </div>
            <p>
                The value to test is in parentheses (in the example, the <code>weekday</code> variable). Each
                individual test uses a <code>case</code> statement that ends with a colon (:). If the value of
                a <code>case</code> statement matches the test value, the code in that case block is executed.
                You close each case statement with a <code>break</code> statement. (If you forget to include
                break in each <code>case</code> block, the code from the next <code>case</code> statement will run also.)
                A <code>switch</code> block often has a <code>default</code> statement as the last case for an "everything
                else" option that runs if none of the other cases are true.
            </p>
            <h3>Looping Code</h3>
            <p>
                You often need to run the same statements repeatedly. You do this by looping.
                For example, you often run the same statements for each item in a collection of
                data. If you know exactly how many times you want to loop, you can use a <code>for</code> loop.
                This kind of loop is especially useful for counting up or counting down:
            </p>
            <pre class="prettyprint prettyprinted"><span class="pln">@@for(var i = 10; i &lt; 21; i++)
            {
                </span><span class="tag">&lt;p&gt;</span><span class="pln">Line #: @@i</span><span class="tag">&lt;/p&gt;</span><span class="pln">
            }</span></pre>
            <p>
                The loop begins with the <code>for</code> keyword, followed by three statements in parentheses,
                each terminated with a semicolon.
            </p>
            <ul>
                <li>
                    Inside the parentheses, the first statement (<code>var&nbsp;i=10;</code>) creates a counter
                    and initializes it to 10. You don't have to name the counter <code>i</code> — you can use any
                    variable. When the <code>for</code> loop runs, the counter is automatically incremented.
                </li>
                <li>
                    The second statement (<code>i&nbsp;&lt;&nbsp;21;</code>) sets the condition for how far you want to
                    count. In this case, you want it to go to a maximum of 20 (that is, keep going
                    while the counter is less than 21).
                </li>
                <li>
                    The third statement (<code>i++</code> ) uses an increment operator, which simply specifies
                    that the counter should have 1 added to it each time the loop runs.
                </li>
            </ul>
            <p>
                Inside the braces is the code that will run for each iteration of the loop. The
                markup creates a new paragraph (<code>&lt;p&gt;</code> element) each time and
                adds a line to the output,&nbsp; displaying the value of <code>i</code> (the counter). When you run this page, the example creates
                11 lines displaying the output, with the text in each line indicating the item
                number.
            </p>
            <p>Rendered results:</p>
            <div class="rendered">
                @for (var i = 10; i < 21; i++)
                {
                    <p>Line #: @i</p>
                }
            </div>
            <p>&nbsp;</p>
            <p>
                If you're working with a collection or array, you often use a <code>foreach</code> loop.
                A collection is a group of similar objects, and the <code>foreach</code> loop lets you carry
                out a task on each item in the collection. This type of loop is convenient for collections,
                because unlike a <code>for</code> loop, you don't have to increment the counter or set a limit.
                Instead, the <code>foreach</code> loop code simply proceeds through the collection until it's
                finished.
            </p>
            <p>
                For example, the following code returns the items in the <code>Request.Headers</code> collection. It uses a <code>foreac</code>h loop to display the
                name of each item by creating a new <code>&lt;li&gt;</code> element in an HTML bulleted list.
            </p>
            <pre class="prettyprint prettyprinted"><span class="tag">&lt;ul&gt;</span><span class="pln">
            @@foreach (var myItem in Request.Headers)
            {
                </span><span class="tag">&lt;li&gt;</span><span class="pln">@@myItem</span><span class="tag">&lt;/li&gt;</span><span class="pln">
            }
            </span><span class="tag">&lt;/ul&gt;</span></pre>
            <p>
                The <code>foreach</code> keyword is followed by parentheses where you declare a variable that
                represents a single item in the collection (in the example, <code>var&nbsp;item</code>), followed
                by the <code>in</code> keyword, followed by the collection you want to loop through. In the body
                of the <code>foreach</code> loop, you can access the current item using the variable that you
                declared earlier.
            </p>
            <p>Rendered results:</p>
            <div class="rendered">
                <ul>
                    @foreach (var myItem in Request.Headers)
                    {
                        <li>@myItem</li>
                    }
                </ul>
            </div>
            <p>To create a more general-purpose loop, use the <code>while</code> statement:</p>
            <pre class="prettyprint prettyprinted"><span class="pln">@@{
                var countNum = 0;
                while (countNum &lt; 10)
                {
                    countNum += 1;
                    </span><span class="tag">&lt;p&gt;</span><span class="pln">Line #@@countNum: </span><span class="tag">&lt;/p&gt;</span><span class="pln">
                }
            }</span></pre>
            <p>Rendered results:</p>
            <div class="rendered">
                @{
                    var countNum = 0;
                    while (countNum < 10)
                    {
                        countNum += 1;
                        <p>Line #@countNum: </p>
                    }
                }
            </div>
            <p>
                A <code>while</code> loop begins with the <code>while</code> keyword, followed by parentheses where you
                specify how long the loop continues (here, for as long as <code>countNum</code> is less than
                50), then the block to repeat. Loops typically increment (add to) or decrement (subtract
                from) a variable or object used for counting. In the example, the <code>+=</code> operator adds
                1 to <code>countNum</code> each time the loop runs. (To decrement a variable in a loop that counts
                down, you would use the decrement operator <code>-=</code>).
            </p>
            <h2>Objects and Collections</h2>
            <p>
                Nearly everything in an ASP.NET website is an object, including the web page
                itself. This section discusses some important objects you'll work with frequently
                in your code.
            </p>
            <h3 id="ID_CollectionsAndObjects">Collection Objects (Arrays and Dictionaries)</h3>
            <p>
                A <em>collection</em> is a group of objects of the same type, such as a collection of
                <code>Customer</code> objects from a database. ASP.NET contains many built-in collections, like
                the <code>Request.Files</code> collection.
            </p>
            <p>
                You'll often work with data in collections. Two common collection types are the
                <em>array</em> and the <em>dictionary</em>. An array is useful when you want to store a collection
                of similar items but don't want to create a separate variable to hold each item:
            </p>
            <pre class="prettyprint prettyprinted"><span class="pln">@@* Array block 1: Declaring a new array using braces. *@@
            @@{
                </span><span class="tag">&lt;h3&gt;</span><span class="pln">Team Members</span><span class="tag">&lt;/h3&gt;</span><span class="pln">
                string[] teamMembers = {"Matt", "Joanne", "Robert", "Nancy"};
                foreach (var person in teamMembers)
                {
                    </span><span class="tag">&lt;p&gt;</span><span class="pln">@@person</span><span class="tag">&lt;/p&gt;</span><span class="pln">
                }
            }</span></pre>
            <p>
                With arrays, you declare a specific data type, such as <code>string</code>,
                <code>int</code>, or <code>DateTime</code>.
                To indicate that the variable can contain an array, you add brackets to the declaration
                (such as <code>string[]</code> or <code>int[]</code>). You can access items in an array using their position
                (index) or by using the <code>foreach</code> statement. Array indexes are zero-based
                — that is, the first item is at position 0, the second item is at position 1, and so on.
            </p>
            <pre class="prettyprint prettyprinted"><span class="pln">@@{
                string[] teamMembers = {"Matt", "Joanne", "Robert", "Nancy"};
                </span><span class="tag">&lt;p&gt;</span><span class="pln">The number of names in the teamMembers array: @@teamMembers.Length </span><span class="tag">&lt;/p&gt;</span><span class="pln">
                </span><span class="tag">&lt;p&gt;</span><span class="pln">Robert is now in position: @@Array.IndexOf(teamMembers, "Robert")</span><span class="tag">&lt;/p&gt;</span><span class="pln">
                </span><span class="tag">&lt;p&gt;</span><span class="pln">The array item at position 2 (zero-based) is @@teamMembers[2]</span><span class="tag">&lt;/p&gt;</span><span class="pln">
                </span><span class="tag">&lt;h3&gt;</span><span class="pln">Current order of team members in the list</span><span class="tag">&lt;/h3&gt;</span><span class="pln">
                foreach (var name in teamMembers)
                {
                    </span><span class="tag">&lt;p&gt;</span><span class="pln">@@name</span><span class="tag">&lt;/p&gt;</span><span class="pln">
                }
                </span><span class="tag">&lt;h3&gt;</span><span class="pln">Reversed order of team members in the list</span><span class="tag">&lt;/h3&gt;</span><span class="pln">
                Array.Reverse(teamMembers);
                foreach (var reversedItem in teamMembers)
                {
                    </span><span class="tag">&lt;p&gt;</span><span class="pln">@@reversedItem</span><span class="tag">&lt;/p&gt;</span><span class="pln">
                }
            }</span></pre>
            <p>
                You can determine the number of items in an array by getting its <code>Length</code> property.
                To get the position of a specific item in the array (to search the array), use the
                <code>Array.IndexOf</code> method. You can also do things like reverse the contents of an array
                (the <code>Array.Reverse</code> method) or sort the contents (the <code>Array.Sort</code> method).
            </p>
            <p>The output of the string array code displayed in a browser:</p>
            <div class="rendered">
                @{
                    string[] teamMembers = { "Matt", "Joanne", "Robert", "Nancy" };
                    <p>The number of names in the teamMembers array: @teamMembers.Length </p>
                    <p>Robert is now in position: @Array.IndexOf(teamMembers, "Robert")</p>
                    <p>The array item at position 2 (zero-based) is @teamMembers[2]</p>
                    <h3>Current order of team members in the list</h3>
                    foreach (var name2 in teamMembers)
                    {
                        <p>@name2</p>
                    }
                    <h3>Reversed order of team members in the list</h3>
                    Array.Reverse(teamMembers);
                    foreach (var reversedItem in teamMembers)
                    {
                        <p>@reversedItem</p>
                    }
                }
            </div>
            <p>
                A dictionary is a collection of key/value pairs, where you provide the key (or
                name) to set or retrieve the corresponding value:
            </p>
            <pre class="prettyprint prettyprinted"><span class="pln">@@{
                var myScores = new Dictionary</span><span class="tag">&lt;string</span><span class="pln">, </span><span class="atn">int</span><span class="tag">&gt;</span><span class="pln">();
                myScores.Add("test1", 71);
                myScores.Add("test2", 82);
                myScores.Add("test3", 100);
                myScores.Add("test4", 59);
            }
            </span><span class="tag">&lt;p&gt;</span><span class="pln">My score on test 3 is: @@myScores["test3"]%</span><span class="tag">&lt;/p&gt;</span><span class="pln">
            @@{myScores["test4"] = 79;}
            </span><span class="tag">&lt;p&gt;</span><span class="pln">My corrected score on test 4 is: @@myScores["test4"]%</span><span class="tag">&lt;/p&gt;</span></pre>
            <p>Rendered results:</p>
            <div class="rendered">
                @{
                    var myScores = new Dictionary<string, int>();
                    myScores.Add("test1", 71);
                    myScores.Add("test2", 82);
                    myScores.Add("test3", 100);
                    myScores.Add("test4", 59);
                }
                <p>My score on test 3 is: @myScores["test3"]%</p>
                @{myScores["test4"] = 79;}
                <p>My corrected score on test 4 is: @myScores["test4"]%</p>
            </div>
            <p>
                To create a dictionary, you use the <code>new</code> keyword to indicate that you're creating
                a new dictionary object. You can assign a dictionary to a variable using the
                <code>var</code>
                keyword. You indicate the data types of the items in the dictionary using angle
                brackets ( <code>&lt; &gt;</code> ). At the end of the declaration, you must add a pair of parentheses,
                because this is actually a method that creates a new dictionary.
            </p>
            <p>
                To add items to the dictionary, you can call the <code>Add</code> method of the dictionary
                variable (<code>myScores</code> in this case), and then specify a key and a value. Alternatively,
                you can use square brackets to indicate the key and do a simple assignment, as in
                the following example:
            </p>
<pre class="prettyprint prettyprinted"><span class="pln">myScores</span><span class="pun">[</span><span class="str">"test4"</span><span class="pun">]</span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="lit">79</span><span class="pun">;</span></pre>
            <p>To get a value from the dictionary, you specify the key in brackets:</p>
<pre class="prettyprint prettyprinted"><span class="kwd">var</span><span class="pln"> testScoreThree </span><span class="pun">=</span><span class="pln"> myScores</span><span class="pun">[</span><span class="str">"test3"</span><span class="pun">];</span></pre>
            
            <h2 id="ID_HandlingErrors">Handling Errors</h2>
            <h3>Try-Catch Statements</h3>
            <p>
                You'll often have statements in your code that might fail for reasons outside
                your control. For example:
            </p>
            <ul>
                <li>
                    <p>
                        If your code tries to create or access a file, all sorts of
                        errors might occur. The file you want might not exist, it might be locked, the
                        code might not have permissions, and so on.
                    </p>
                </li>

                <li>
                    <p>
                        Similarly, if your code tries to update records in a database, there can
                        be permissions issues, the connection to the database might be dropped, the
                        data to save might be invalid, and so on.
                    </p>
                </li>
            </ul>
            <p>
                In programming terms, these situations are called <em>exceptions</em>. If your code encounters
                an exception, it generates (throws) an error message that's, at best, annoying
                to users:
            </p>
            <p><img alt="Razor-Img14" src="http://i2.asp.net/media/38808/Razor_programmingintro-14.jpg?cdn_id=2014-04-02-001"></p>
            <p>
                In situations where your code might encounter exceptions, and in order to avoid
                error messages of this type, you can use <code>try/catch</code> statements. In the
                <code>try</code> statement,
                you run the code that you're checking. In one or more <code>catch</code> statements, you can
                look for specific errors (specific types of exceptions) that might have occurred.
                You can include as many <code>catch</code> statements as you need to look for errors that you
                are anticipating.
            </p>
            <div class="note">
                <span class="dogear"></span>
                <p>
                    <strong>Note</strong>&nbsp;&nbsp; We recommend that you avoid using the <code>Response.Redirect</code> method in <code>try/catch</code>
                    statements, because it can cause an exception in your page.
                </p>
            </div>
            <p>
                The following example shows a page that creates a text file
                on the first request and then displays a button that lets the user open the file.
                The example deliberately uses a bad file name so that it will cause an exception.
                The code includes <code>catch</code> statements for two possible exceptions: <code>FileNotFoundException</code>,
                which occurs if the file name is bad, and <code>DirectoryNotFoundException</code>, which occurs
                if ASP.NET can't even find the folder. (You can uncomment a statement in the example
                in order to see how it runs when everything works properly.)
            </p>
            <p>
                If your code didn't handle the exception, you would see an error page like the
                previous screen shot. However, the <code>try/catch</code> section helps prevent the user from
                seeing these types of errors.
            </p>
<pre class="prettyprint prettyprinted"><span class="pln">@@{
    var dataFilePath = "~/dataFile.txt";
    var fileContents = "";
    var physicalPath = Server.MapPath(dataFilePath);
    var userMessage = "Hello world, the time is " + DateTime.Now;
    var userErrMsg = "";
    var errMsg = "";
    if(IsPost)
    {
        // When the user clicks the "Open File" button and posts
        // the page, try to open the created file for reading.
        try {
            // This code fails because of faulty path to the file.
            fileContents = File.ReadAllText(@@"c:\batafile.txt");
            // This code works. To eliminate error on page,
            // comment the above line of code and uncomment this one.
            //fileContents = File.ReadAllText(physicalPath);
        }
        catch (FileNotFoundException ex) {
            // You can use the exception object for debugging, logging, etc.
            errMsg = ex.Message;
            // Create a friendly error message for users.
            userErrMsg = "A file could not be opened, please contact "
                + "your system administrator.";
        }
        catch (DirectoryNotFoundException ex) {
            // Similar to previous exception.
            errMsg = ex.Message;
            userErrMsg = "A directory was not found, please contact "
                + "your system administrator.";
        }
    }
    else
    {
        // The first time the page is requested, create the text file.
        File.WriteAllText(physicalPath, userMessage);
    }
}
</span><span class="dec">&lt;!DOCTYPE html&gt;</span><span class="pln">
</span><span class="tag">&lt;html</span><span class="pln"> </span><span class="atn">lang</span><span class="pun">=</span><span class="atv">"en"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;head&gt;</span><span class="pln">
        </span><span class="tag">&lt;meta</span><span class="pln"> </span><span class="atn">charset</span><span class="pun">=</span><span class="atv">"utf-8"</span><span class="pln"> </span><span class="tag">/&gt;</span><span class="pln">
        </span><span class="tag">&lt;title&gt;</span><span class="pln">Try-Catch Statements</span><span class="tag">&lt;/title&gt;</span><span class="pln">
    </span><span class="tag">&lt;/head&gt;</span><span class="pln">
    </span><span class="tag">&lt;body&gt;</span><span class="pln">
    </span><span class="tag">&lt;form</span><span class="pln"> </span><span class="atn">method</span><span class="pun">=</span><span class="atv">"POST"</span><span class="pln"> </span><span class="atn">action</span><span class="pun">=</span><span class="atv">""</span><span class="pln"> </span><span class="tag">&gt;</span><span class="pln">
      </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"Submit"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"Submit"</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"Open File"</span><span class="tag">/&gt;</span><span class="pln">
    </span><span class="tag">&lt;/form&gt;</span><span class="pln">
    </span><span class="tag">&lt;p&gt;</span><span class="pln">@@fileContents</span><span class="tag">&lt;/p&gt;</span><span class="pln">
    </span><span class="tag">&lt;p&gt;</span><span class="pln">@@userErrMsg</span><span class="tag">&lt;/p&gt;</span><span class="pln">
    </span><span class="tag">&lt;/body&gt;</span><span class="pln">
</span><span class="tag">&lt;/html&gt;</span></pre>
            <p>Results: <a href="TryCatch.cshtml">click here to see the rendered results</a></p>
            <h2>Additional Resources</h2>
            <p><strong>Programming with Visual Basic</strong></p>
            <div style="margin-left: 15px;">
                <p><a href="http://go.microsoft.com/fwlink/?LinkId=202908">Appendix: Visual Basic Language and Syntax</a></p>
            </div>
            <p><strong>Reference Documentation</strong></p>
            <div style="margin-left: 15px;">
                <p><a href="http://msdn.microsoft.com/en-us/library/ee532866.aspx">ASP.NET</a></p>
                <p><a href="http://msdn.microsoft.com/en-us/library/kx37x362.aspx">C# Language</a></p>
            </div><div class="social-bar"><span class="social-item"><div class="fb-like fb_iframe_widget" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false" data-font="segoe ui" fb-xfbml-state="rendered" fb-iframe-plugin-query="app_id=&amp;font=segoe%20ui&amp;href=http%3A%2F%2Fwww.asp.net%2Fweb-pages%2Ftutorials%2Fbasics%2F2-introduction-to-asp-net-web-programming-using-the-razor-syntax&amp;layout=button_count&amp;locale=en_US&amp;sdk=joey&amp;send=false&amp;show_faces=false&amp;width=450"><span style="vertical-align: bottom; width: 76px; height: 20px;"><iframe name="ff89eadf4" width="450px" height="1000px" frameborder="0" allowtransparency="true" scrolling="no" title="fb:like Facebook Social Plugin" src="http://www.facebook.com/plugins/like.php?app_id=&amp;channel=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter%2FdgdTycPTSRj.js%3Fversion%3D40%23cb%3Df3fc438b2%26domain%3Dwww.asp.net%26origin%3Dhttp%253A%252F%252Fwww.asp.net%252Ff26b867ba8%26relation%3Dparent.parent&amp;font=segoe%20ui&amp;href=http%3A%2F%2Fwww.asp.net%2Fweb-pages%2Ftutorials%2Fbasics%2F2-introduction-to-asp-net-web-programming-using-the-razor-syntax&amp;layout=button_count&amp;locale=en_US&amp;sdk=joey&amp;send=false&amp;show_faces=false&amp;width=450" class="" style="border: none; visibility: visible; width: 76px; height: 20px;"></iframe></span></div></span><span class="social-item"><a href="https://twitter.com/share" class="twitter-share-button" data-dnt="true" data-text="Intro to ASP.NET Web Programming Razor Syntax" style="display:none;">Tweet</a></span></div><h2>Author Information</h2><div id="author-43321" class="author-box article clearfix"><img src="http://i2.asp.net/media/3740061/profile4.jpg?cdn_id=2014-04-02-001" alt="Tom FitzMacken"><p><strong>Tom FitzMacken</strong>&nbsp;–&nbsp;Tom FitzMacken is a Senior Programming Writer on the Web Platform &amp; Tools Content team.</p></div>
        </span>
    </div>
</body>
</html>